<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--
    前端网页中  能够允许你打开系统自带的文件资源管理器 选择文件的
    永远只有一个元素  input  type="file

    隔山打牛操作：看着你是点了好看的按钮 其实你是点了 file 框（让他隐藏 样式太丑了）
    所以才弹出系统自带的文件资源管理器
   -->
   <!-- e.target.value 是用户输入的值 -->
   <!-- <input type="text"> -->

   <!-- 需求：当用户选择了某个文件后 我需要将用户选择（change 事件）的文件打印出来 -->
   <!-- e.target.files 是用户选择的文件们数组  -->
  <input type="file">

  <script>
     document.querySelector('input').addEventListener('change', function(e) {
      // 只要用户选择了文件 就会触发 change 事件 就会执行提供的回调函数
      console.log(e.target.files[0])

      // 为了避免下次选择同样的文件 不触发这个事件的 bug
      // 只要是拿到文件 做完了事  记得将 file 框的 value 清空
      e.target.value = ''
     })
  </script>
</body>
</html>
